/* Import Typography. https://transfonter.org/ */
@font-face {
  font-family: Roboto;
  src: url("./Roboto-BoldItalic.eot");
  src:
    url("./Roboto-BoldItalic.eot?#iefix") format("embedded-opentype"),
    url("./Roboto-BoldItalic.woff2") format("woff2"),
    url("./Roboto-BoldItalic.woff") format("woff"),
    url("./Roboto-BoldItalic.ttf") format("truetype"),
    url("./Roboto-BoldItalic.svg#Roboto-BoldItalic") format("svg");
  font-weight: bold;
  font-style: italic;
}

@font-face {
  font-family: Roboto;
  src: url("./Roboto-ThinItalic.eot");
  src:
    url("./Roboto-ThinItalic.eot?#iefix") format("embedded-opentype"),
    url("./Roboto-ThinItalic.woff2") format("woff2"),
    url("./Roboto-ThinItalic.woff") format("woff"),
    url("./Roboto-ThinItalic.ttf") format("truetype"),
    url("./Roboto-ThinItalic.svg#Roboto-ThinItalic") format("svg");
  font-weight: 100;
  font-style: italic;
}

@font-face {
  font-family: Roboto;
  src: url("./Roboto-Thin.eot");
  src:
    url("./Roboto-Thin.eot?#iefix") format("embedded-opentype"),
    url("./Roboto-Thin.woff2") format("woff2"),
    url("./Roboto-Thin.woff") format("woff"),
    url("./Roboto-Thin.ttf") format("truetype"),
    url("./Roboto-Thin.svg#Roboto-Thin") format("svg");
  font-weight: 100;
  font-style: normal;
}

@font-face {
  font-family: Roboto;
  src: url("./Roboto-Italic.eot");
  src:
    url("./Roboto-Italic.eot?#iefix") format("embedded-opentype"),
    url("./Roboto-Italic.woff2") format("woff2"),
    url("./Roboto-Italic.woff") format("woff"),
    url("./Roboto-Italic.ttf") format("truetype"),
    url("./Roboto-Italic.svg#Roboto-Italic") format("svg");
  font-weight: normal;
  font-style: italic;
}

@font-face {
  font-family: Roboto;
  src: url("./Roboto-BlackItalic.eot");
  src:
    url("./Roboto-BlackItalic.eot?#iefix") format("embedded-opentype"),
    url("./Roboto-BlackItalic.woff2") format("woff2"),
    url("./Roboto-BlackItalic.woff") format("woff"),
    url("./Roboto-BlackItalic.ttf") format("truetype"),
    url("./Roboto-BlackItalic.svg#Roboto-BlackItalic") format("svg");
  font-weight: 900;
  font-style: italic;
}

@font-face {
  font-family: Roboto;
  src: url("./Roboto-MediumItalic.eot");
  src:
    url("./Roboto-MediumItalic.eot?#iefix") format("embedded-opentype"),
    url("./Roboto-MediumItalic.woff2") format("woff2"),
    url("./Roboto-MediumItalic.woff") format("woff"),
    url("./Roboto-MediumItalic.ttf") format("truetype"),
    url("./Roboto-MediumItalic.svg#Roboto-MediumItalic") format("svg");
  font-weight: 500;
  font-style: italic;
}

@font-face {
  font-family: Roboto;
  src: url("./Roboto-Medium.eot");
  src:
    url("./Roboto-Medium.eot?#iefix") format("embedded-opentype"),
    url("./Roboto-Medium.woff2") format("woff2"),
    url("./Roboto-Medium.woff") format("woff"),
    url("./Roboto-Medium.ttf") format("truetype"),
    url("./Roboto-Medium.svg#Roboto-Medium") format("svg");
  font-weight: 500;
  font-style: normal;
}

@font-face {
  font-family: Roboto;
  src: url("./Roboto-Regular.eot");
  src:
    url("./Roboto-Regular.eot?#iefix") format("embedded-opentype"),
    url("./Roboto-Regular.woff2") format("woff2"),
    url("./Roboto-Regular.woff") format("woff"),
    url("./Roboto-Regular.ttf") format("truetype"),
    url("./Roboto-Regular.svg#Roboto-Regular") format("svg");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: Roboto;
  src: url("./Roboto-LightItalic.eot");
  src:
    url("./Roboto-LightItalic.eot?#iefix") format("embedded-opentype"),
    url("./Roboto-LightItalic.woff2") format("woff2"),
    url("./Roboto-LightItalic.woff") format("woff"),
    url("./Roboto-LightItalic.ttf") format("truetype"),
    url("./Roboto-LightItalic.svg#Roboto-LightItalic") format("svg");
  font-weight: 300;
  font-style: italic;
}

@font-face {
  font-family: Roboto;
  src: url("./Roboto-Black.eot");
  src:
    url("./Roboto-Black.eot?#iefix") format("embedded-opentype"),
    url("./Roboto-Black.woff2") format("woff2"),
    url("./Roboto-Black.woff") format("woff"),
    url("./Roboto-Black.ttf") format("truetype"),
    url("./Roboto-Black.svg#Roboto-Black") format("svg");
  font-weight: 900;
  font-style: normal;
}

@font-face {
  font-family: Roboto;
  src: url("./Roboto-Light.eot");
  src:
    url("./Roboto-Light.eot?#iefix") format("embedded-opentype"),
    url("./Roboto-Light.woff2") format("woff2"),
    url("./Roboto-Light.woff") format("woff"),
    url("./Roboto-Light.ttf") format("truetype"),
    url("./Roboto-Light.svg#Roboto-Light") format("svg");
  font-weight: 300;
  font-style: normal;
}

@font-face {
  font-family: Roboto;
  src: url("./Roboto-Bold.eot");
  src:
    url("./Roboto-Bold.eot?#iefix") format("embedded-opentype"),
    url("./Roboto-Bold.woff2") format("woff2"),
    url("./Roboto-Bold.woff") format("woff"),
    url("./Roboto-Bold.ttf") format("truetype"),
    url("./Roboto-Bold.svg#Roboto-Bold") format("svg");
  font-weight: bold;
  font-style: normal;
}

:root {
  --mp-text-h1-font-size: var(--mp-size-96);
  --mp-text-h1-line-height: normal;
  --mp-text-h1-font-weight: 100;
  --mp-text-h1-letter-spacing: -1.5px;
  --mp-text-h1-color: var(--theme-on-bg-1);
  --mp-text-h1-margin-bottom: var(--mp-spacing-16);
  --mp-text-h2-font-size: var(--mp-size-60);
  --mp-text-h2-line-height: normal;
  --mp-text-h2-font-weight: 100;
  --mp-text-h2-letter-spacing: -0.5px;
  --mp-text-h2-color: var(--theme-on-bg-1);
  --mp-text-h2-margin-bottom: var(--mp-spacing-16);
  --mp-text-h3-font-size: var(--mp-size-48);
  --mp-text-h3-line-height: normal;
  --mp-text-h3-font-weight: 400;
  --mp-text-h3-letter-spacing: 0;
  --mp-text-h3-color: var(--theme-on-bg-1);
  --mp-text-h3-margin-bottom: var(--mp-spacing-12);
  --mp-text-h4-font-size: var(--mp-size-36);
  --mp-text-h4-line-height: normal;
  --mp-text-h4-font-weight: 400;
  --mp-text-h4-letter-spacing: 0.25px;
  --mp-text-h4-color: var(--theme-on-bg-1);
  --mp-text-h4-margin-bottom: var(--mp-spacing-8);
  --mp-text-h5-font-size: var(--mp-size-24);
  --mp-text-h5-line-height: normal;
  --mp-text-h5-font-weight: 400;
  --mp-text-h5-letter-spacing: 0;
  --mp-text-h5-color: var(--theme-on-bg-1);
  --mp-text-h5-margin-bottom: var(--mp-spacing-8);
  --mp-text-h6-font-size: var(--mp-size-20);
  --mp-text-h6-line-height: normal;
  --mp-text-h6-font-weight: 500;
  --mp-text-h6-letter-spacing: 0.15px;
  --mp-text-h6-color: var(--theme-on-bg-1);
  --mp-text-h6-margin-bottom: var(--mp-spacing-8);
  --mp-text-subtitle1-font-size: var(--mp-size-16);
  --mp-text-subtitle1-line-height: var(--mp-size-24);
  --mp-text-subtitle1-font-weight: 400;
  --mp-text-subtitle1-letter-spacing: 0.15px;
  --mp-text-subtitle1-color: var(--theme-on-bg-1);
  --mp-text-subtitle1-margin-bottom: var(--mp-spacing-8);
  --mp-text-subtitle2-font-size: var(--mp-size-14);
  --mp-text-subtitle2-line-height: var(--mp-size-24);
  --mp-text-subtitle2-font-weight: 500;
  --mp-text-subtitle2-letter-spacing: 0.1px;
  --mp-text-subtitle2-color: var(--theme-on-bg-1);
  --mp-text-subtitle2-margin-bottom: var(--mp-spacing-8);
  --mp-text-body1-font-size: var(--mp-size-16);
  --mp-text-body1-line-height: var(--mp-size-24);
  --mp-text-body1-font-weight: 400;
  --mp-text-body1-letter-spacing: 0.5px;
  --mp-text-body1-color: var(--theme-on-bg-1);
  --mp-text-body1-margin-bottom: var(--mp-spacing-8);
  --mp-text-body2-font-size: var(--mp-size-14);
  --mp-text-body2-line-height: var(--mp-size-24);
  --mp-text-body2-font-weight: 400;
  --mp-text-body2-letter-spacing: 0.25px;
  --mp-text-body2-color: var(--theme-on-bg-1);
  --mp-text-body2-margin-bottom: var(--mp-spacing-8);
  --mp-text-button-font-size: var(--mp-size-14);
  --mp-text-button-line-height: normal;
  --mp-text-button-font-weight: 500;
  --mp-text-button-letter-spacing: 1.25px;
  --mp-text-button-text-transform: uppercase;
  --mp-text-button-color: var(--theme-on-bg-2);
  --mp-text-button-margin-bottom: var(--mp-spacing-8);
  --mp-text-caption-font-size: var(--mp-size-12);
  --mp-text-caption-line-height: normal;
  --mp-text-caption-font-weight: 400;
  --mp-text-caption-letter-spacing: 0.4px;
  --mp-text-caption-color: var(--theme-on-bg-2);
  --mp-text-caption-margin-bottom: var(--mp-spacing-8);
  --mp-text-overline-font-size: var(--mp-size-10);
  --mp-text-overline-line-height: normal;
  --mp-text-overline-font-weight: 400;
  --mp-text-overline-letter-spacing: 1.5px;
  --mp-text-overline-text-transform: uppercase;
  --mp-text-overline-color: var(--theme-on-bg-2);
  --mp-text-overline-margin-bottom: var(--mp-spacing-8);
}
